<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="user_form"></form>
    <script src="node_modules/art-template/lib/template-web.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>

    <script type="text/html" id="test">
        <div>
          <label for="">用户名</label>
          <input type="text" value="{{ user.username }}">
        </div>
        <div>
          <label for="">年龄</label>
          <input type="text" value="{{ user.age }}">
        </div>
        <div>
          <label for="">职业</label>
          <select name="" id="">
            {{ each jobs }} {{ if user.job === $value.id }}
            <option value="{{ $value.id }}" selected>{{ $value.name }}</option>
            {{ else }}
            <option value="{{ $value.id }}">{{ $value.name }}</option>
            {{ /if }} {{ /each }}
          </select>
        </div>
      </script>
    
    <script>
        var data = {}
        $.get('http://localhost:3000/users/3')
            .then((user) => {
                data.user = user
                return $.get('http://localhost:3000/jobs')
            })
            .then((jobs) => {
                data.jobs = jobs
                var htmlStr = template('test', data)
                
                document.getElementById('user_form').innerHTML = htmlStr
            })
    </script>
</body>

</html>